<template>
	<view class="item" @click="goToDetail(item)">
		<!-- <view class="" @click.stop> -->
		<u-swiper :list="swiperlist" :autoplay="false" height="346rpx" radius="0"></u-swiper>
		<!-- </view> -->

		<view class="labelbox">
			<text v-for="(litem, lindex) in labels" :key="lindex"
				:style="{ backgroundColor: litem.attrs.bgColor }">{{ litem.text }}</text>
		</view>
		<view v-if="item.pastureLevel && item.pastureLevel != 0" class="rate">
			<u-rate :count="item.pastureLevel" v-model="item.pastureLevel" readonly></u-rate>
		</view>
		<!-- 	<view class="th" v-if="item.discount == 1">
			<u-image :src="th" width="92rpx" height="51rpx" mode="scaleToFill"></u-image>
		</view> -->
		<view class="title">{{ item.productName }}</view>
		<view class="subtitle u-flex">
			<view class="titleitem u-line-1"> {{ levelTypestr() }}</view>
			<view class="titleitem u-line-1"> {{ `${item.province} ${item.city}` }}</view>
		</view>

		<view class="price u-flex-y-center">
			<view class="" v-if="item.unitPrice && item.unitPrice != 0">
				<text>￥</text>
				<text class="priceMin">{{ item.unitPrice || 0 }}</text>
				<text class="unit" v-if="item.unit&&item.unit!='null'">{{ item.unit }}</text>
			</view>
			<u-image v-if="item.discount == 1" :src="th" width="46rpx" height="26rpx" mode="scaleToFill"></u-image>
		</view>
		<view class="retentionMoney" v-if="item.retentionMoney">
			质量保证金<text class="text">{{ item.retentionMoney }}</text>
		</view>
	</view>
</template>

<script>
	import th from "@/static/goodsitem/th.png";
	export default {
		name: "goodsitem",
		props: {
			item: {
				type: Object,
				default: () => {
					return {};
				},
			},
			dicts: {
				type: Object,
				default: () => {
					return {};
				},
			},
			levelTypeList: {
				type: Array,
				default: () => {
					return [];
				},
			},
			type: {
				type: String,
				default: "",
			},
			querydata: {
				type: Object,
				default: () => {
					return {};
				},
			},
		},
		data() {
			return {
				th,
				btncustomStyle: {
					width: "auto",
					margin: "0 10rpx 0 0",
					minWidth: "auto",
				},
			};
		},
		computed: {
			swiperlist() {
				if (this.type == "video") {
					return [this.item.videoUrl];
				}
				let r = this.item.imagesUrl.split(",");
				if (this.item.videoUrl) {
					r.push(this.item.videoUrl);
				}

				return r;
			},
			labels() {
				let r = [];
				try {
					let dqtransactionalMode = this.dicts["transactional_mode"].find(
						(item) => {
							return item.value == this.item.transactionalMode;
						}
					);
					if (dqtransactionalMode) {
						r.push({
							text: dqtransactionalMode.label,
							attrs: {
								bgColor: "#F3B367",
							},
						});
					}
					// manage_model
					let dqmanage_model = this.dicts["manage_model"].find((item) => {
						return item.value == this.item.manageModel;
					});

					if (dqmanage_model) {
						r.push({
							text: dqmanage_model.label,
							attrs: {
								bgColor: "#DC6A71",
							},
						});
					}
					// if (this.item.discount == 1) {
					//   r.push({ text: "特惠", attrs: { bgColor: "#39C03E" } });
					// }
				} catch (error) {}
				return r;
			},
		},
		methods: {
			levelTypestr() {
				let r = this.levelTypeList.find((item) => {
					return item.id == this.item.level3Type;
				});
				return r ? r.fullName : "";
			},
			goToDetail(item) {
				if (this.type == "favorite") {
					uni.navigateTo({
						url: "/pages/shop/goods/detail/detail?id=" +
							item.productTradingId +
							"&type=" +
							this.querydata.type,
					});
					return;
				}
				uni.navigateTo({
					url: "/pages/shop/goods/detail/detail?id=" +
						item.id +
						"&type=" +
						this.querydata.type,
				});
			},
		},
	};
</script>

<style lang="scss" scoped>
	// .goodslist {
	// 	display: flex;
	// 	justify-content: space-between;
	// 	flex-wrap: wrap;
	// 	padding: 0 20rpx;
	.item {
		position: relative;
		width: 340rpx;
		height: 536rpx;
		border-radius: 16rpx;
		background-color: #ffffff;
		margin-top: 24rpx;
		font-size: 28rpx;
		overflow: hidden;

		&>image:nth-child(1) {
			width: 346rpx;
			height: 346rpx;
			border-radius: 8rpx 8rpx 0 0;
		}

		&>image:nth-last-child(2) {
			position: absolute;
			bottom: 32rpx;
			right: 22rpx;
			width: 24rpx;
			height: 6rpx;
		}

		.rate {
			position: absolute;
			top: 10rpx;
			left: 10rpx;
		}

		.th {
			position: absolute;
			top: 0rpx;
			right: 0rpx;
		}

		.labelbox {
			position: absolute;
			top: 308rpx;
			left: 0;

			text {
				display: inline-block;
				border-radius: 4rpx;
				// background-color: #d96b6c;
				color: #ffffff;
				margin-right: 10rpx;
				text-align: center;
				height: 32rpx;
				padding: 0 10rpx;
				line-height: 32rpx;
				font-size: 24rpx;
			}
		}

		.title,
		.subtitle {
			width: 346rpx;
			padding-left: 16rpx;
			padding-right: 6rpx;
			white-space: nowrap;
			text-overflow: ellipsis;
			-webkit-box-pack: center;
			overflow: hidden;
		}

		.title {
			font-size: 30rpx;
			color: rgb(51, 51, 51);
			line-height: 42rpx;
			margin-top: 6rpx;
		}

		.subtitle {
			font-size: 26rpx;
			color: rgb(153, 153, 153);
			margin-top: 4rpx;
			line-height: 36rpx;
			justify-content: space-between;

			.titleitem {
				max-width: 40%;
				display: block !important;
			}

			.retentionMoney {
				.text {
					padding-left: 8rpx;
					color: rgb(227, 13, 13);
				}
			}
		}

		.price {
			margin: 10rpx 0 0 16rpx;
			color: rgb(227, 13, 13);
			font-size: 26rpx;
			height: 40rpx;
			font-family: "AllAndNone";

			.priceMin {
				font-size: 34rpx;
				margin-right: 4rpx;
				font-weight: bold;
			}

			.unit {
				font-size: 24rpx;
				color: #999;
			}

			.marketPrice {
				margin-left: 6rpx;
				font-size: 28rpx;
				color: rgb(153, 153, 153);
				text-decoration: line-through;
			}

			.spec {
				font-size: 24rpx;
			}
		}

		.menu {
			position: absolute;
			display: none;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.6);
			z-index: 2;

			view {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 300rpx;
				height: 70rpx;
				margin: 16rpx auto;
				border-radius: 70rpx;
				background-color: #ffffff;
			}

			text {
				display: block;
				width: 140rpx;
				margin-left: 8rpx;
			}

			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
	}

	.retentionMoney {
		color: $u-error;
		height: 40rpx;
		font-size: 18rpx;
		padding-left: 16rpx;
		display: flex;
		align-items: center;
		font-weight: bold;
	}

	// }
</style>